<script setup lang="ts">
import { computed, useSlots } from 'vue'
import CardBoxComponentBody from '@/components/CardBoxComponentBody.vue'
import CardBoxComponentFooter from '@/components/CardBoxComponentFooter.vue'

const props = withDefaults(
  defineProps<{
    rounded?: string
    flex?: string
    hasComponentLayout?: boolean
    hasTable?: boolean
    isForm?: boolean
    isHoverable?: boolean
    isModal?: boolean
  }>(),
  {
    rounded: 'rounded-2xl',
    flex: 'flex-col',
  },
)

const emit = defineEmits<{
  (e: 'submit', event: MouseEvent): void
}>()

const slots = useSlots()

const hasFooterSlot = computed(() => slots.footer && !!slots.footer())

const componentClass = computed(() => {
  const base: string[] = [
    props.rounded,
    props.flex,
    props.isModal ? 'dark:bg-slate-900' : 'dark:bg-slate-900/70',
  ]

  if (props.isHoverable)
    base.push('hover:shadow-lg transition-shadow duration-500')

  return base
})

const submit = (event: MouseEvent) => {
  emit('submit', event)
}
</script>

<template>
  <component
    :is="isForm ? 'form' : 'div'"
    :class="componentClass"
    class="bg-white flex"
    @submit="submit"
  >
    <slot v-if="hasComponentLayout" />
    <template v-else>
      <CardBoxComponentBody :no-padding="hasTable">
        <slot />
      </CardBoxComponentBody>
      <CardBoxComponentFooter v-if="hasFooterSlot">
        <slot name="footer" />
      </CardBoxComponentFooter>
    </template>
  </component>
</template>
